<template>
	<rom-table-list :data="commodityData">
		<table-column-expand :prop="expandProps" :label="expandLabels" />
		<el-table-column prop="id" label="ID" />
		<table-column-image prop="img" label="商品图" size="50" />
		<table-column-message prop="name" label="商品名称" width="240" />
		<el-table-column prop="price" label="商品售价" />
		<el-table-column prop="sales" label="销量" />
		<el-table-column prop="stock" label="库存" />
		<el-table-column prop="sorting" label="排序" />
		<el-table-column prop="addTime" label="添加时间" min-width="140" />
		<el-table-column prop="state" label="状态" fixed="right" />
		<template #operations>
			<el-button link type="primary" size="small">详情</el-button>
		</template>
	</rom-table-list>
</template>
<script setup>
import { TableList as RomTableList, TableColumnExpand, TableColumnImage, TableColumnMessage } from "@rom/el-table";

defineProps({
	// 商品数据
	commodityData: {
		type: Array,
		default: () => [
			{
				id: 1,
				img: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
				name: "魔小宅24骨复古折叠雨伞男女晴雨两用黑胶防晒遮",
				price: "29.90",
				sales: 6,
				stock: 100,
				sorting: 1,
				addTime: "2024-04-27 10:00",
				state: "出售中",
				// 以下为拓展数据
				classify: "登山装备露营装备",
				marketPrice: "36.00",
				costPrice: "18.00",
				star: 0,
				virtualSales: 0,
			},
		],
	},
	// 要展示的拓展字段名
	expandProps: {
		type: Array,
		default: () => ["classify", "marketPrice", "costPrice", "star", "virtualSales"],
	},
	// 要展示的拓展字段名对应的标签
	expandLabels: {
		type: Array,
		default: () => ["商品分类", "市场价", "成本价", "收藏", "虚拟销量"],
	},
});
</script>
